import React, { Component } from 'react';
import {View, Text, TouchableOpacity, ScrollView, Image} from 'react-native'
import {GetTaskCorrectApi} from '../../config/api'
import Loading from '../common/loading_common'
import HeadingLine from '../common/heading_line'
import styles from '../../config/styles'

class CorrectingWithTask extends Component {
    constructor (props) {
        super(props);
        const {params} = props.navigation.state
        this.state = {
            id: params.id,
            homework_id: params.homework_id,
            task: {},
            students: [],
            loading: true
        }
    }

    componentDidMount () {
        this.getData()
    }

    getData = () => {
        const {id, homework_id} = this.state
        GetTaskCorrectApi(id, homework_id).then((data) => {
            this.setState({
                task: data.task,
                students: data.students,
                loading: false
            })
        })
    }

    //展示学生的地方
    studentTemplate = (student, index, status) => {
        const image = student.avatar == null ? (
            student.sex == true ? require('../../assets/images/role-student-male.png') : require('../../assets/images/role-student-female.png')
        ) : {uri: student.avatar}
        //未交的学生不能批改，其他的都可以
        // let _onPress = status == 'init' ? (() => {}) : (() => {
        //     this.props.navigation.navigate('correcting_with_batch', {students: this.state.students})
        // })
        let _onPress = student.status == 'init' ? () => {} : () => this.props.navigation.navigate('correcting_with_batch', {
                students: this.state.students[status],
                currentStudentId: student.id,
                task_id: this.state.task.id,
                status: student.status,
                afterReply: () => {this.getData()}
            })
        return (
            <View key={index}>
                <TouchableOpacity onPress={_onPress}>
                    <Image source={image} style={[styles.image_wrap]} />
                </TouchableOpacity>
                {
                    status == 'finished'?
                        <View style={styles.hw_status_badge_blue}><Text style={{fontWeight:'bold',fontSize:12,color:'#fff'}}>{student.score}</Text></View>:
                    student.status == 'revised'||student.status == 'revising'?
                        <View style={styles.hw_status_badge}><Text style={{fontWeight:'bold',fontSize:12,color:'#fff'}}>订</Text></View>
                    :null
                }

                <View style={{alignItems: 'center',marginTop:5}}>
                    <Text>{student.name}</Text>

                </View>
            </View>
        )
    }

    render () {
        const {loading, students, task} = this.state
        let col_objects = [
            {col: 'answered', color: 'red', name: '待批'},
            //{col: 'revising', color: '#844200', name: '订正'},
            {col: 'init', color: 'orange', name: '未交'},
            {col: 'finished', color: 'grey', name: '完成'},                
        ]
        if (Loading == true) {
            return <Loading />
        } else {
            return (
                <ScrollView style={styles.main_body}>
                    <View style={{backgroundColor: 'white', padding: 15}}>
                        <View>
                            <Text>教材：{task.textbook}</Text>
                        </View>
                        <View style={{paddingTop: 10}}>
                            <Text>单元：{task.chapter}</Text>
                        </View>
                        <View style={{paddingTop: 10}}>
                            <Text>课文：{task.section}</Text>
                        </View>
                    </View>
                    <View style={{marginLeft:10,marginRight:10}}>
                    {col_objects.map((col_obj, index) => {
                        let _length = students[col_obj.col] && students[col_obj.col].length || 0
                        let _data = students[col_obj.col] || []
                        return(
                            <HeadingLine
                                key={index} 
                                color={col_obj.color}
                                title={`${col_obj.name}(${_length})`}
                                style={{backgroundColor: 'white', marginTop: 10}}
                                contentStyle={{backgroundColor: 'white'}}
                                collapsible={false}
                            >
                                <View style={[styles.classroom_container]}>
                                    {_data.map((student, index) => {
                                        return this.studentTemplate(student, index, col_obj.col)         
                                    })}
                                </View>
                            </HeadingLine>
                        )
                    })}
                        </View>
                </ScrollView>
            )
        }
        
    }
}

export default CorrectingWithTask